<template>
  <div class="about">
    <div class="info">
      <div class="toppost"><img :src="obj.poster" /></div>
      <div class="topinfo">
        <div class="shuoming">
          {{ obj.name }}
          <div>{{ obj.filmType.name }}</div>
        </div>
        <div class="shuoming1">{{ obj.category }}</div>
        <div class="shuoming1">{{ obj.premiereAt }}</div>
        <div class="shuoming1">{{ obj.nation }}|{{ obj.runtime }}</div>
        <div class="shuoming1">{{ obj.synopsis }}</div>
      </div>
      <div class="topinfo" style="margin-top: 10px">
        <div>演职人员</div>
        <div class="yanzhilist">
          <div class="actor" v-for="(item, index) in obj.actors" key="index">
            <img :src="item.avatarAddress" />
            <div>{{ item.role }}</div>
            <div class="namewe">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="topinfo" style="margin-top: 10px">
        <div>剧照</div>
        <div class="juzhao">
          <img v-for="item1 in obj.photos" :src="item1" />
        </div>
      </div>
    </div>
    <div class="ljgp" @click="ljgp()">立即购票</div>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      obj: {},
      arr: [],
      count: 0,
    };
  },
  mounted() {
    if (window.localStorage.getItem("gplist")) {
      this.arr = JSON.parse(window.localStorage.getItem("gplist"));
    } else {
      this.arr = [];
    }
    console.log(this.$route.query.id);
    this.getinfo();
  },
  methods: {
    ljgp() {
      this.count++;

      this.arr.push({
        id: this.obj.id,
        poster: this.obj.poster,
        name: this.obj.name,
        count: this.count,
      });
      window.localStorage.setItem("gplist", JSON.stringify(this.arr));
      Toast(`购买成功,已购买${this.count}张，座位随便坐~`);
    },
    getinfo() {
      this.$http
        .get(`/pkq/getFilmInfo?cors=T&filmId=${this.$route.query.id}`)
        .then((res) => {
          console.log(res);
          this.obj = res.data.film;
        });
    },
  },
};
</script>
<style scoped>
.info {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
}
.ljgp {
  width: 100%;
  height: 40px;
  background: red;
  text-align: center;
  color: #fff;
  line-height: 40px;
  position: fixed;
  bottom: 0px;
  left: 0px;
}
.juzhao {
  overflow: hidden;
}
.juzhao img {
  width: 100px;
  height: 100px;
  float: left;
}
.namewe {
  color: gray;
  font-size: 13px;
}
.actor img {
  width: 85px;
  height: 85px;
}
.actor {
  /* width:85px; */
  text-align: center;
  margin-right: 10px;
}
.yanzhilist {
  width: 100%;
  height: auto;
  display: flex;
  overflow: auto;
}

.shuoming div {
  width: 20px;
  height: 20px;
  background: #e5e5e5;
  color: #fff;
  text-align: center;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  border-radius: 2px;
}
.shuoming {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.shuoming1 {
  color: #797d82;
  font-size: 14px;
}
.topinfo {
  width: 100%;
  height: auto;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
}
.toppost img {
  width: 100%;
  margin-top: -155px;
}
.toppost {
  width: 100%;
  height: 215px;
  overflow: hidden;
}
.about {
  width: 100%;
  height: 100%;
  background: #e5e5e5;
}
</style>